<script setup lang="ts">
// import  { usetabBarStore } from "../../store/index";

import { onMounted, reactive, ref, computed } from 'vue';
// const title = ref('Hello')

// const current = ref('')



interface courseType {
    id: Number,
    title: String,
    tag: String,
    img: String,
    rate: Number,
    teacher: String,
    people: Number,
    content: String,
}

// 页面跳转
const details = (item: Object) => {
    uni.navigateTo({
        url: '/pagesB/course/details/details?detailData=' + JSON.stringify(item),
    });
};



const courseList = ref<courseType[]>([
    {
        id: 1,
        title: 'c语言程序设计',
        tag: '软件学院',
        img: '/courselist/1.jpg',
        rate: 3.5,
        teacher: '罗永胜',
        people: 99,
        content: '本课程将用最典型的实例和通俗的讲解为你讲授程序设计的思想'

    },
    {
        id: 2,
        title: 'java核心技术概论',
        tag: '软件学院',
        img: '/courselist/2.jpg',
        rate: 4.5,
        teacher: '江导',
        people: 100,
        content: 'java是一门程序设计语言，长期位居编程语言排行榜TIOBE的首位'

    }, {
        id: 3,
        title: 'python金融分析',
        tag: '软件学院',
        img: '/courselist/3.jpg',
        rate: 2,
        teacher: '张凯',
        people: 120,
        content: '简洁却强大、简单却专业，它是当今世界最受欢迎的编程语言!'

    },
    {
        id: 4,
        title: '高等数学',
        tag: '人文学院',
        img: '/courselist/4.jpg',
        rate: 3,
        teacher: '岑苑君 康永强',
        people: 70,
        content: '高等数学是各高校本科生必修的一门重要基础课'

    }, {
        id: 5,
        title: '交际英语',
        tag: '人文学院',
        img: '/courselist/5.jpg',
        rate: 2.5,
        teacher: '吴晓燕',
        people: 100,
        content: '以职业需求为导向，着重培养你的实际英语运用能力！'

    },
    {
        id: 6,
        title: 'web前端开发技术',
        tag: '软件学院',
        img: '/courselist/6.jpg',
        rate: 1,
        teacher: '罗永胜 何小民',
        people: 50,
        content: 'web前端开发是创建网页或APP界面呈现给用户的过程'

    }
])
</script>

<template>
    <view class="coursehall">
        <view class="courselist">
            <view class="courselist_item animate__animated animate__fadeInUp" v-for="item in courseList"
                @click="details(item)">
                <image :src="'/static/images' + item.img" mode=""></image>
                <view class="block">
                    <view class="block_tag">{{ item.tag }}</view>
                    <view style="color: #282f3e; font-size: 30rpx; font-weight: 600">{{ item.title }}</view>
                    <view style="color: #585d69; font-size: 25rpx">{{ item.teacher }}</view>
                    <view class="block_footer">
                        <image src="/static/images/star.svg" mode=""></image>
                        <view class="">{{ item.rate }}</view>
                        <view class="">|</view>
                        <view class="">{{ item.people }}&nbsp;学生</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.coursehall {
    position: absolute;
    padding: 30rpx;
    height: 100%;
    background-color: #f6f6f6;
}

.courselist {
    @include flex(space-between);
    flex-wrap: wrap;

    &_item {
        position: relative;
        width: 320rpx;
        height: 400rpx;
        background-color: #fff;
        border-radius: 20rpx;
        overflow: hidden;

        image {
            width: 100%;
            height: 200rpx;
        }

        .block {
            height: 200rpx;
            @include flex-column();

            &_tag {
                position: absolute;
                background-color: #fff;
                border-radius: 10rpx;
                opacity: 0.7;
                top: 15rpx;
                left: 15rpx;
                padding: 6rpx;
                font-size: 18rpx;
                color: $bgcolor;
            }

            &_footer {
                @include flex();
                height: 60rpx;
                width: 300rpx;
                color: #616161;
                font-size: 25rpx;

                image {
                    width: 35rpx;
                }
            }
        }
    }

    &_item:nth-child(2n + 1) {
        margin: 15rpx 15rpx 15rpx 0;
    }

    &_item:nth-child(2n) {
        margin: 15rpx 0 15rpx 15rpx;
    }
}
</style>
